<template>
	<div class="saicheng-container">
		<el-card shadow="hover" :body-style="{ padding: '20px' }">
			<div class="tournament-list-container">
				<!-- 左侧赛事列表 -->
				<div class="tournament-list">
					<div v-for="(item, index) in tournamentsList" :key="item.id" class="tournament-item" :class="{ active: selectedIndex === index }" @click="selectTournament(index, item)">
						<el-tooltip :content="item.tournamentName" placement="right" :disabled="item.tournamentName.length < 8">
							<div class="tournament-name">
								<i class="el-icon-trophy tournament-icon"></i>
								{{ item.tournamentName }}
							</div>
						</el-tooltip>
						<div class="tournament-date">{{ item.startTime }}</div>
					</div>
				</div>

				<!-- 右侧内容区 -->
				<div class="tournament-content">
					<div v-if="selectedTournament" class="tournament-detail">
						<div class="tournament-header">
							<div class="header-left">
								<h2>{{ selectedTournament.tournamentName }}</h2>
								<div class="tournament-info">
									<span class="info-item">
										<i class="el-icon-date"></i>
										{{ formatDate(selectedTournament.startTime) }}
									</span>
								</div>
							</div>
							<div class="header-right">
								<el-button type="primary" size="small" @click="handleAdd"> <i class="el-icon-plus"></i> 新增赛程 </el-button>
							</div>
						</div>
						<div class="match-cards-container">
							<div v-for="item in scheduleList" :key="item.id" class="match-card">
								<div class="match-card-header">
									<div class="match-info">
										<span class="round-badge">第{{ item.round }}轮</span>
										<span class="session-badge">第{{ item.session }}场</span>
									</div>
									<div class="match-time">
										<i class="el-icon-time"></i>
										{{ formatDateTime(item.matchDateTime) }}
									</div>
								</div>

								<div class="match-content">
									<div class="team team-left">
										<div class="team-info">
											<img :src="baseUrl + item.teamAUrl" alt="队伍A" class="team-logo" />
											<span class="team-name">{{ item.teamA }}</span>
										</div>
									</div>
									<div class="vs-container">
										<span class="vs-badge">VS</span>
									</div>
									<div class="team team-right">
										<div class="team-info">
											<img :src="baseUrl + item.teamBUrl" alt="队伍B" class="team-logo" />
											<span class="team-name">{{ item.teamB }}</span>
										</div>
									</div>
								</div>

								<div class="match-footer">
									<div class="match-result">
										<el-tag :type="item.matchResult ? 'success' : 'info'" effect="plain" size="small">
											{{ item.matchResult || "未开始" }}
										</el-tag>
									</div>
									<div class="match-actions">
										<el-button type="text" size="small" @click="handleEdit(item)"> <i class="el-icon-edit"></i> 编辑 </el-button>
										<el-button type="text" size="small" class="delete-btn" @click="handleDelete(item)"> <i class="el-icon-delete"></i> 删除 </el-button>
									</div>
								</div>
							</div>
						</div>

						<!-- 新增/编辑对话框 -->
						<el-dialog
							:title="dialogType === 'add' ? '新增赛程' : '编辑赛程'"
							:visible.sync="dialogVisible"
							width="800px"
							:close-on-click-modal="false"
							:destroy-on-close="true"
							:append-to-body="true">
							<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
								<el-form-item label="轮次" prop="round">
									<el-input-number v-model="form.round" :min="1" controls-position="right" class="full-width" />
								</el-form-item>
								<el-form-item label="场次" prop="session">
									<el-input-number v-model="form.session" :min="1" controls-position="right" class="full-width" />
								</el-form-item>
								<el-form-item label="比赛时间" prop="matchDateTime">
									<el-date-picker v-model="form.matchDateTime" type="datetime" placeholder="选择比赛时间" value-format="yyyy-MM-ddTHH:mm:ss.SSSZ" style="width: 100%" />
								</el-form-item>

								<div class="teams-form-container">
									<div class="team-form team-left">
										<div class="team-title">队伍A</div>
										<ImageUpload v-model="form.teamAUrl" />
										<el-form-item prop="teamA" class="no-label">
											<el-input v-model="form.teamA" placeholder="请输入队伍A名称">
												<template slot="prepend">
													<i class="el-icon-user-solid"></i>
												</template>
											</el-input>
										</el-form-item>
									</div>
									<div class="vs-divider">
										<span class="vs-text">VS</span>
									</div>
									<div class="team-form team-right">
										<div class="team-title">队伍B</div>
										<ImageUpload v-model="form.teamBUrl" />
										<el-form-item prop="teamB" class="no-label">
											<el-input v-model="form.teamB" placeholder="请输入队伍B名称">
												<template slot="prepend">
													<i class="el-icon-user-solid"></i>
												</template>
											</el-input>
										</el-form-item>
									</div>
								</div>

								<el-form-item label="比赛结果" prop="matchResult">
									<el-input v-model="form.matchResult" placeholder="请输入比赛结果">
										<template slot="prepend">
											<i class="el-icon-trophy"></i>
										</template>
									</el-input>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="dialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
							</div>
						</el-dialog>
					</div>
					<el-empty v-else description="请选择赛事"></el-empty>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import { getTournamentsList } from "@/api/lv/saishi";

import { getTournamentSchedule, createTournamentMatch, deleteTournamentMatch } from "@/api/lv/saicheng";
import ImageUpload from "./../../components/ImageUpload/index.vue";

export default {
	data() {
		return {
			tournamentsList: [],
			selectedIndex: -1,
			selectedTournament: null,
			scheduleList: [],
			dialogVisible: false,
			dialogType: "add", // 'add' 或 'edit'
			submitting: false,
			form: {
				round: 1,
				session: 1,
				matchDateTime: "",
				teamA: "",
				teamB: "",
				matchResult: "",
				tournamentId: ""
			},
			rules: {
				round: [{ required: true, message: "请输入轮次", trigger: "blur" }],
				session: [{ required: true, message: "请输入场次", trigger: "blur" }],
				matchDateTime: [{ required: true, message: "请选择比赛时间", trigger: "change" }],
				teamA: [{ required: true, message: "请输入队伍A名称", trigger: "blur" }],
				teamB: [{ required: true, message: "请输入队伍B名称", trigger: "blur" }]
			},
			baseUrl: process.env.VUE_APP_BASE_API
		};
	},
	mounted() {
		this.getTournamentsList();
	},
	methods: {
		getTournamentsList() {
			getTournamentsList({
				pageNum: 1,
				pageSize: 1000
			}).then((res) => {
				this.tournamentsList = res.data.records;
			});
		},
		selectTournament(index, tournament) {
			this.selectedIndex = index;
			this.selectedTournament = tournament;
			this.getTournamentSchedule(tournament.id);
		},
		getTournamentSchedule(id) {
			getTournamentSchedule(id).then((res) => {
				this.scheduleList = res.data;
				console.log(this.scheduleList);
			});
		},
		formatDateTime(dateTimeStr) {
			if (!dateTimeStr) return "-";
			const date = new Date(dateTimeStr);
			return date.toLocaleString("zh-CN", {
				year: "numeric",
				month: "2-digit",
				day: "2-digit",
				hour: "2-digit",
				minute: "2-digit"
			});
		},
		formatDate(dateStr) {
			if (!dateStr) return "-";
			const date = new Date(dateStr);
			return date.toLocaleDateString("zh-CN", {
				year: "numeric",
				month: "long",
				day: "numeric"
			});
		},
		headerCellStyle() {
			return {
				background: "#f5f7fa",
				color: "#606266",
				fontWeight: "bold",
				height: "50px",
				padding: "0 12px"
			};
		},
		cellStyle() {
			return {
				padding: "16px 12px",
				height: "70px"
			};
		},
		handleAdd() {
			this.dialogType = "add";
			this.form = {
				round: 1,
				session: 1,
				matchDateTime: "",
				teamA: "",
				teamB: "",
				matchResult: "",
				tournamentId: this.selectedTournament.id
			};
			this.dialogVisible = true;
		},
		handleEdit(row) {
			this.dialogType = "edit";
			this.form = { ...row };
			this.dialogVisible = true;
		},
		handleDelete(row) {
			this.$confirm("确认删除该赛程记录吗？", "提示", {
				type: "warning"
			})
				.then(() => {
					// TODO: 调用删除API
					deleteTournamentMatch(row.id).then((res) => {
						this.$message.success("删除成功");
						this.getTournamentSchedule(this.selectedTournament.id);
					});
				})
				.catch(() => {});
		},
		handleSubmit() {
			this.$refs.formRef.validate(async (valid) => {
				if (valid) {
					this.submitting = true;
					createTournamentMatch(this.form).then((res) => {
						this.submitting = false;
						this.dialogVisible = false;
						this.getTournamentSchedule(this.selectedTournament.id);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.saicheng-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: calc(100vh - 120px);
}

.tournament-list-container {
	display: flex;
	gap: 30px;
	min-height: 80vh;
	background-color: #fff;
	min-width: 1200px;
}

.tournament-list {
	width: 240px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 15px;
	border-right: 1px solid #ebeef5;
	overflow-y: auto;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-thumb {
		background: #dcdfe6;
		border-radius: 3px;
	}
}

.tournament-item {
	padding: 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s;
	border: 1px solid #ebeef5;

	&:hover {
		background-color: #f5f7fa;
		transform: translateX(2px);
	}

	&.active {
		background-color: #ecf5ff;
		border-color: #409eff;
		color: #409eff;
	}
}
.team-logo {
	width: 40px;
	height: 40px;
}
.tournament-name {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tournament-icon {
	font-size: 16px;
	color: #ffd04b;
}

.tournament-date {
	font-size: 12px;
	color: #909399;
}

.tournament-content {
	flex: 1;
	padding: 20px;
	overflow-x: auto;

	&::-webkit-scrollbar {
		height: 8px;
		width: 8px;
	}

	&::-webkit-scrollbar-thumb {
		background: #dcdfe6;
		border-radius: 4px;

		&:hover {
			background: #c0c4cc;
		}
	}

	&::-webkit-scrollbar-track {
		background: #f5f7fa;
	}
}

.tournament-detail {
	h2 {
		margin-top: 0;
		margin-bottom: 20px;
		color: #303133;
		font-size: 20px;
	}
}

.tournament-header {
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	.header-left {
		h2 {
			margin: 0 0 12px 0;
			color: #303133;
			font-size: 24px;
		}
	}
}

.tournament-info {
	display: flex;
	gap: 20px;
	color: #606266;

	.info-item {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;

		i {
			color: #409eff;
		}
	}
}

.match-cards-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 16px;
	padding: 8px;
	background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
	border-radius: 8px;
}

.match-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	border: 1px solid #e4e7ed;
	overflow: hidden;

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(64, 158, 255, 0.1);
		border-color: #a0cfff;
	}

	.match-card-header {
		padding: 12px 16px;
		background: linear-gradient(135deg, #ecf5ff 0%, #fff 100%);
		border-bottom: 1px solid #e4e7ed;

		.match-info {
			display: flex;
			gap: 8px;

			.round-badge,
			.session-badge {
				padding: 4px 12px;
				font-size: 12px;
				background: #fff;
				color: #409eff;
				border: 1px solid #b3d8ff;
				box-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
			}
		}

		.match-time {
			color: #606266;

			i {
				color: #409eff;
			}
		}
	}

	.match-content {
		padding: 20px 16px;
		background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;

		.team {
			flex: 1;
			display: flex;
			align-items: center;

			&.team-left {
				justify-content: flex-end;
			}

			&.team-right {
				justify-content: flex-start;
			}

			.team-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				padding: 8px 16px;
				background: #fff;
				border: 1px solid #ebeef5;
				border-radius: 4px;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
				transition: all 0.3s ease;

				&:hover {
					border-color: #409eff;
					background: #ecf5ff;
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
				}

				.team-logo {
					width: 40px;
					height: 40px;
					object-fit: cover;
					border-radius: 4px;
				}

				.team-name {
					font-size: 14px;
					font-weight: 600;
					text-align: center;
					background: linear-gradient(90deg, #303133, #606266);
					-webkit-background-clip: text;
					color: transparent;
					max-width: 120px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.vs-container {
			width: 60px;
			display: flex;
			align-items: center;
			justify-content: center;

			.vs-badge {
				padding: 6px 12px;
				font-size: 12px;
				background: #fff;
				color: #909399;
				border: 1px solid #dcdfe6;
				border-radius: 20px;
				box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
				white-space: nowrap;
			}
		}
	}

	.match-footer {
		padding: 12px 16px;
		background: #fafafa;
		border-top: 1px solid #e4e7ed;

		.match-result {
			.el-tag {
				&.el-tag--success {
					background-color: #f0f9eb;
					border-color: #b3e19d;
					color: #67c23a;
				}

				&.el-tag--info {
					background-color: #f4f4f5;
					border-color: #e9e9eb;
					color: #909399;
				}
			}
		}

		.match-actions {
			display: flex;
			gap: 12px;

			.el-button {
				&:hover {
					color: #409eff;
					background: #ecf5ff;
					border-radius: 4px;
				}
			}

			.delete-btn {
				&:hover {
					color: #f56c6c;
					background: #fef0f0;
				}
			}
		}
	}
}

// 调整响应式布局断点
@media screen and (max-width: 1400px) {
	.match-cards-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 1000px) {
	.match-cards-container {
		grid-template-columns: 1fr;
	}

	.match-card {
		max-width: 600px;
		margin: 0 auto;
	}
}

.full-width {
	width: 100%;
}

.teams-form-container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 22px;
	padding: 20px;
	background: #f5f7fa;
	border-radius: 4px;

	.team-form {
		flex: 1;

		.team-title {
			font-size: 14px;
			color: #606266;
			margin-bottom: 8px;
			font-weight: 500;

			&::before {
				content: "*";
				color: #f56c6c;
				margin-right: 4px;
			}
		}

		:deep(.el-input-group__prepend) {
			background-color: #fff;
		}
	}

	.vs-divider {
		display: flex;
		align-items: center;
		padding: 30px 0 0;

		.vs-text {
			padding: 4px 12px;
			background: #fff;
			border: 1px solid #dcdfe6;
			border-radius: 15px;
			font-size: 12px;
			font-weight: bold;
			color: #909399;
		}
	}
}

.no-label {
	:deep(.el-form-item__label) {
		display: none;
	}

	:deep(.el-form-item__content) {
		margin-left: 0 !important;
	}
}

:deep(.el-dialog) {
	.el-dialog__body {
		padding: 20px;
	}
}

:deep(.el-table) {
	th {
		background-color: #f5f7fa !important;
		font-size: 14px;
		font-weight: 500;
		height: 50px;
	}

	td {
		padding: 12px 0;
	}

	.cell {
		padding: 0 12px;
	}
}
</style>
